<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面板节点模板工具函数 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.9b3057af.css" as="style"><link rel="preload" href="/my/assets/js/app.91fb0046.js" as="script"><link rel="preload" href="/my/assets/js/597.873319f7.js" as="script"><link rel="preload" href="/my/assets/js/1536.a48ecfa9.js" as="script"><link rel="preload" href="/my/assets/js/1291.730865ea.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.9b3057af.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="/my/ui/widgets/" class="nav-link router-link-active">
  补丁
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="/my/ui/widgets/" class="nav-link router-link-active">
  补丁
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/my/ui/widgets/dict.html" class="sidebar-link">dict 全局字典管理</a></li><li><a href="/my/ui/widgets/member-picker.html" class="sidebar-link">仿钉钉人员选择器</a></li><li><a href="/my/ui/widgets/org-member-picker.html" class="sidebar-link">部门人员关联选择器</a></li><li><a href="/my/ui/widgets/list-picker.html" class="sidebar-link">列表选择器</a></li><li><a href="/my/ui/widgets/go-panel-node.html" aria-current="page" class="active sidebar-link">面板节点模板工具函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#使用场景" class="sidebar-link">使用场景</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#安装命令" class="sidebar-link">安装命令</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#面板节点结构" class="sidebar-link">面板节点结构</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#面板节点构造函数配置项" class="sidebar-link">面板节点构造函数配置项</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#常规使用" class="sidebar-link">常规使用</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#色彩配置" class="sidebar-link">色彩配置</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#panel节点通用配置" class="sidebar-link">Panel节点通用配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#panelnode的特殊配置参数" class="sidebar-link">panelNode的特殊配置参数</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#header-区域配置" class="sidebar-link">Header 区域配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#header的特殊配置参数" class="sidebar-link">Header的特殊配置参数</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-区域配置" class="sidebar-link">Body 区域配置</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-image-图片模块" class="sidebar-link">Body.image 图片模块</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#image的特殊配置参数" class="sidebar-link">image的特殊配置参数</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-info-内容模块" class="sidebar-link">Body.info 内容模块</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-info-title" class="sidebar-link">Body.info.title</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-info-detail" class="sidebar-link">Body.info.detail</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#body-more" class="sidebar-link">Body.more</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#more的特殊配置参数" class="sidebar-link">more的特殊配置参数</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#footer区域配置" class="sidebar-link">Footer区域配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#footer-配置参数" class="sidebar-link">Footer 配置参数</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#其他额外功能" class="sidebar-link">其他额外功能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#panel-expandbtn-树拓展按钮" class="sidebar-link">panel.expandBtn 树拓展按钮</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#others" class="sidebar-link">Others</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#tooltip-lock-tags-badge-bindings" class="sidebar-link">tooltip lock tags badge $bindings</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#使用案例" class="sidebar-link">使用案例</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/go-panel-node.html#panel-node-js-源码" class="sidebar-link">panel-node.js 源码</a></li></ul></li><li><a href="/my/ui/widgets/charts1.html" class="sidebar-link">图表类插件集合1</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="面板节点模板工具函数"><a href="#面板节点模板工具函数" class="header-anchor">#</a> 面板节点模板工具函数</h1> <h2 id="使用场景"><a href="#使用场景" class="header-anchor">#</a> 使用场景</h2> <p>扩展gojs 的使用场景，使gojs 节点能够展示更多节点信息</p> <h2 id="安装命令"><a href="#安装命令" class="header-anchor">#</a> 安装命令</h2> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> run widgets go-panel-node
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>执行命令后，工具生成在项目的 <strong><code>&quot;.my/widgets/go-panel-node&quot;</code></strong> 路径下；
有个“panel-node.js”文件， 是面板节点生成的工具函数。</p> <h2 id="面板节点结构"><a href="#面板节点结构" class="header-anchor">#</a> 面板节点结构</h2> <p><img src="" alt="形状节点元素构成示意图"></p> <h2 id="面板节点构造函数配置项"><a href="#面板节点构造函数配置项" class="header-anchor">#</a> 面板节点构造函数配置项</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>panelNode({
  panel: {
    // 面板节点全局配置
  },
  header: {
    // 面板头部区域配置
  },
  body: {
    // 主体配置
    image: {
      // 主体左侧图片配置
    },
    info: {
      title: {
        // 主体标题配置 
      },
      detail: {
        // 主体内容配置
      }
    },
    more: {
      // 更多区域内容配置
      detail: {
        // 更多展示内容配置
      }           
    }
  },
  footer: {
    // 面板底部区域配置  
  },

  others: [......], // 其他元素

  // ----继承nodeTemplate 函数的 其他快捷配置项----
  tooltip: {}, // 提示 
  lock: {}, // 锁定
  tags: {}, // 标签
  badge: {}, // 数字提示
  $bindings: [] // 数据绑定
})
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div><h2 id="常规使用"><a href="#常规使用" class="header-anchor">#</a> 常规使用</h2> <!----><h2 id="色彩配置"><a href="#色彩配置" class="header-anchor">#</a> 色彩配置</h2> <p>根据 panel、 info.title、 info.detail 中的背景与字体颜色对面板元素进行颜色的修改配置</p> <!----><h2 id="panel节点通用配置"><a href="#panel节点通用配置" class="header-anchor">#</a> Panel节点通用配置</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">panelNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>          
  panel<span class="token operator">:</span> <span class="token punctuation">{</span> 
    width<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
    fill<span class="token operator">:</span> <span class="token string">'#061178'</span><span class="token punctuation">,</span> <span class="token comment">// 面板背景颜色</span>
    sideWidth<span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// 左侧图片宽度设置为0 </span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="panelnode的特殊配置参数"><a href="#panelnode的特殊配置参数" class="header-anchor">#</a> panelNode的特殊配置参数</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>width</td> <td>面板节点宽度</td> <td>Number</td> <td>-</td> <td>200</td></tr> <tr><td>fill</td> <td>面板节点背景颜色</td> <td>String</td> <td>-</td> <td>white</td></tr> <tr><td>sideWidth</td> <td>定义面板内 左侧图片区域宽度</td> <td>Number</td> <td>-</td> <td>80</td></tr> <tr><td>bg</td> <td>定义面板背景图形的参数(go.Shape的配置)</td> <td>Object</td> <td>-</td> <td>-</td></tr> <tr><td>expandBtn</td> <td>节点树的展开按钮</td> <td>Object / Boolean</td> <td>-</td> <td>-</td></tr></tbody></table> <blockquote><p>sideWidth 左侧图片宽度 可以在panel的‘sideWidth’中预设置，默认为100。也可以读取 body.image 内的 “width” 来控制图片宽度（取最大值）。 <strong><code>如果 sideWidth = 0 且 不配置 body.image， 则不显示图片</code></strong></p></blockquote> <h4 id="其他节点配置"><a href="#其他节点配置" class="header-anchor">#</a> 其他节点配置：</h4> <p>panel支持其他 gojs 中的 graphObject 配置</p> <!----><h2 id="header-区域配置"><a href="#header-区域配置" class="header-anchor">#</a> Header 区域配置</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">panelNode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>          
  panel<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  header<span class="token operator">:</span> <span class="token punctuation">{</span>
    textKey<span class="token operator">:</span> <span class="token string">'header'</span><span class="token punctuation">,</span>
    fill<span class="token operator">:</span> <span class="token string">'#030852'</span><span class="token punctuation">,</span>
    font<span class="token operator">:</span> <span class="token string">'bold 16pt sans-serif'</span><span class="token punctuation">,</span>
    color<span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span>
    tools<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="header的特殊配置参数"><a href="#header的特殊配置参数" class="header-anchor">#</a> Header的特殊配置参数</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>textKey</td> <td>面板节点宽度</td> <td>Number</td> <td>-</td> <td>200</td></tr> <tr><td>fill</td> <td>面板节点背景颜色</td> <td>String</td> <td>-</td> <td>white</td></tr> <tr><td>font</td> <td>定义面板内 左侧图片区域宽度</td> <td>Number</td> <td>-</td> <td>80</td></tr> <tr><td>color</td> <td>头部字体颜色</td> <td>Object</td> <td>-</td> <td>-</td></tr> <tr><td>tools</td> <td>工具按钮列表</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>tools.icon</td> <td>按钮icon, 为svg path 的字符串</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>tools.icon</td> <td>按钮颜色</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>tools.cb</td> <td>按钮点击回调函数, 参数为 e, obj(gojs的节点实例)</td> <td>Function</td> <td>-</td> <td>-</td></tr> <tr><td>tools.name</td> <td>按钮名称</td> <td>String</td> <td>-</td> <td>-</td></tr></tbody></table> <!----><h2 id="body-区域配置"><a href="#body-区域配置" class="header-anchor">#</a> Body 区域配置</h2> <p>Body 分为三大模块： image / info / more</p> <h2 id="body-image-图片模块"><a href="#body-image-图片模块" class="header-anchor">#</a> Body.image 图片模块</h2> <ul><li>body.image 为Body 中的 图片配置项，可以是一个函数（函数为自定义图片）</li> <li>body.image 的宽度 以 panel.sideWidth 和 image.width 中的最大值来定义</li></ul> <h3 id="image的特殊配置参数"><a href="#image的特殊配置参数" class="header-anchor">#</a> image的特殊配置参数</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>sourceKey</td> <td>对应数据内的图片url字段</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>width</td> <td>图片宽度</td> <td>Number</td> <td>-</td> <td>80</td></tr> <tr><td>height</td> <td>图片高度</td> <td>Number</td> <td>-</td> <td>-</td></tr> <tr><td>stroke</td> <td>边框颜色</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>isRight</td> <td>控制图片放右边</td> <td>Boolean</td> <td>-</td> <td>200</td></tr></tbody></table> <!----><h2 id="body-info-内容模块"><a href="#body-info-内容模块" class="header-anchor">#</a> Body.info 内容模块</h2> <p>内容模块分为 “title” 和 “detail” 两个子模块</p> <h3 id="body-info-title"><a href="#body-info-title" class="header-anchor">#</a> Body.info.title</h3> <h4 id="特殊配置参数"><a href="#特殊配置参数" class="header-anchor">#</a> 特殊配置参数</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>titleKey</td> <td>标题对应节点数据的字段</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>subTitleKey</td> <td>副标题对应节点数据的字段</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>titleProps</td> <td>标题文字（textBlock）的配置</td> <td>Object</td> <td>-</td> <td>-</td></tr> <tr><td>subTitleProps</td> <td>副标题文字（textBlock）的配置</td> <td>Object</td> <td>-</td> <td>-</td></tr></tbody></table> <!----><h3 id="body-info-detail"><a href="#body-info-detail" class="header-anchor">#</a> Body.info.detail</h3> <p>面板节点中显示数据内容的区域。数据以表格布局形式展示。
info 中的detail 可以为函数形式， 支持自定义生成数据显示内容。</p> <h4 id="detail的特殊配置参数"><a href="#detail的特殊配置参数" class="header-anchor">#</a> detail的特殊配置参数</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>dataKey</td> <td>对应节点数据的内容字段</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>column</td> <td>数据展示列数</td> <td>Number</td> <td>-</td> <td>-</td></tr> <tr><td>color</td> <td>内容字体颜色</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>contentTemplate</td> <td>内容模板函数</td> <td>Function</td> <td>-</td> <td>-</td></tr></tbody></table> <h4 id="datakey-对应数据格式"><a href="#datakey-对应数据格式" class="header-anchor">#</a> dataKey 对应数据格式</h4> <p>detail 模块 渲染的 数据必须为一个对象数组，数据格式如下：</p> <ul><li>label: [string] 字段数据标题</li> <li>value: [string] 字段数据内容</li> <li>isRow: [boolean] 是否占满整行</li></ul> <!----><h2 id="body-more"><a href="#body-more" class="header-anchor">#</a> Body.more</h2> <p>描述： more 模块是 body区域中 &quot;info&quot;内容 后面的补充内容区域。</p> <ul><li>more 默认提供切换展示按钮，可以切换显示隐藏</li> <li>more 区域可以设置为默认显示且不可隐藏，可以用作 节点数据展示的补充布局。</li></ul> <h3 id="more的特殊配置参数"><a href="#more的特殊配置参数" class="header-anchor">#</a> more的特殊配置参数</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>hideButton</td> <td>是否显示切换按钮</td> <td>Boolean</td> <td>true/false</td> <td>true</td></tr> <tr><td>buttonColor</td> <td>按钮颜色</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>defaultShow</td> <td>区域是否默认显示</td> <td>Boolean</td> <td>-</td> <td>false</td></tr> <tr><td>detail</td> <td>内容模板配置，同 body.info.detail</td> <td></td> <td>-</td> <td>-</td></tr></tbody></table> <!----><h2 id="footer区域配置"><a href="#footer区域配置" class="header-anchor">#</a> Footer区域配置</h2> <p>Footer 是 配置面板底部的GraphObject 的配置参数，在Body区域外面。</p> <h3 id="footer-配置参数"><a href="#footer-配置参数" class="header-anchor">#</a> Footer 配置参数</h3> <p>Footer的参数比较简单，只保留了 fill (背景颜色) 和 content(内容渲染函数) 两个。这是为了尽可能保留 底部内容 的自由度</p> <blockquote><p>主要是开发者累了，不想写了。还是你们自己来吧。</p></blockquote> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>fill</td> <td>底部背景颜色</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>content</td> <td>内容生成函数</td> <td>Function</td> <td>-</td> <td>-</td></tr></tbody></table> <blockquote><p>content 内容生成函数 需要返回一个gojs的 GraphObject 实例 （例如 go.Panel 或 go.Shape ）</p></blockquote> <!----><h2 id="其他额外功能"><a href="#其他额外功能" class="header-anchor">#</a> 其他额外功能</h2> <h3 id="panel-expandbtn-树拓展按钮"><a href="#panel-expandbtn-树拓展按钮" class="header-anchor">#</a> panel.expandBtn 树拓展按钮</h3> <p>在 panel配置（面板的全局配置）下有一个 “expandBtn”的 配置，支持 Object 和 Boolean 类型。 用于控制 节点是否显示 树展开按钮</p> <h4 id="treeexpandbutton-的参数"><a href="#treeexpandbutton-的参数" class="header-anchor">#</a> TreeExpandButton 的参数：</h4> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>
  <span class="token comment">// set the two additional properties used by &quot;TreeExpanderButton&quot;</span>
  <span class="token comment">// that control the shape depending on the value of Node.isTreeExpanded</span>
  <span class="token string">&quot;_treeExpandedFigure&quot;</span><span class="token operator">:</span> <span class="token string">&quot;TriangleUp&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;_treeCollapsedFigure&quot;</span><span class="token operator">:</span> <span class="token string">&quot;TriangleDown&quot;</span><span class="token punctuation">,</span>
  <span class="token comment">// set properties on the icon within the border</span>
  <span class="token string">&quot;ButtonIcon.fill&quot;</span><span class="token operator">:</span> <span class="token string">&quot;darkcyan&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;ButtonIcon.strokeWidth&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token comment">// set general &quot;Button&quot; properties</span>
  <span class="token string">&quot;ButtonBorder.figure&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Circle&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;ButtonBorder.stroke&quot;</span><span class="token operator">:</span> <span class="token string">&quot;darkcyan&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;_buttonStrokeOver&quot;</span><span class="token operator">:</span> <span class="token string">&quot;darkcyan&quot;</span><span class="token punctuation">,</span>
  alignment<span class="token operator">:</span> go<span class="token punctuation">.</span>Spot<span class="token punctuation">.</span>Bottom<span class="token punctuation">,</span> 
  alignmentFocus<span class="token operator">:</span> go<span class="token punctuation">.</span>Spot<span class="token punctuation">.</span>Top
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><!----><h3 id="others"><a href="#others" class="header-anchor">#</a> Others</h3> <p>Others 是个数组，里面元素为gojs 的 graphObject</p> <!----><h3 id="tooltip-lock-tags-badge-bindings"><a href="#tooltip-lock-tags-badge-bindings" class="header-anchor">#</a> tooltip lock tags badge $bindings</h3> <p>panelNode() 方法是基于 nodeTemplate() 函数生成的节点模板，因此 支持 以上几个 快捷配置参数</p> <blockquote><p>&quot;nodeTemplate()&quot; 为 &quot;import {nodeTemplate} from '$ui/gojs/template/nodes'&quot;, 是 myGo 组件中默认的节点模板构造函数。</p></blockquote> <!----><h2 id="使用案例"><a href="#使用案例" class="header-anchor">#</a> 使用案例</h2> <p>侦查组织结构图例：</p> <!----><h2 id="panel-node-js-源码"><a href="#panel-node-js-源码" class="header-anchor">#</a> panel-node.js 源码</h2> <!----></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/ui/widgets/list-picker.html" class="prev">
        列表选择器
      </a></span> <span class="next"><a href="/my/ui/widgets/charts1.html">
        图表类插件集合1
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.91fb0046.js" defer></script><script src="/my/assets/js/597.873319f7.js" defer></script><script src="/my/assets/js/1536.a48ecfa9.js" defer></script><script src="/my/assets/js/1291.730865ea.js" defer></script>
  </body>
</html>
